<template>
	<view class="orders" :class="orderList.length == 0 ? 'empty' : ''">
		<block v-if="orderList.length > 0">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in orderList" :key="index" @tap.prevent="orderDetail(item)">
					<view class="top">
						<view class="left">
							<image src="@/static/my/cp_zs.png" mode=""></image>
							<text :class="item.status == 3 ? 'qx' : ''">船票＋景点</text>
						</view>
						<view class="right">
							<block v-if="item.status==0&&item.djsTime">
								<uCountDown @finish="finish(item)" :djsTime="item.djsTime" />
							</block>
							<block v-else>
								<text :class="oscConfig[item.status]">{{ osConfig[item.status] }}</text>
							</block>
						</view>
					</view>
					<view class="content">
						<view class="title">{{ item.jointName }}</view>
						<view class="date">
							<text>{{ item.sailDate.substring(0, 10) || '' }}</text>
							<!-- <text>{{ item.priceType == 1 ? '成人票' : '儿童票' }} * {{ item.num }}</text> -->
							<text>数量/游客数量 * {{ item.num }}</text>
						</view>
						<view class="room_price">
							<text :class="item.status == 3 ? 'qx' : ''">¥{{ item.realityPay || 290 }}</text>
						</view>
					</view>
					<!-- 退款中-->
					<view class="btns" v-if="item.status == -2">
						<view @tap.stop="againReserve(item)">再次预订</view>
					</view>
					<!-- 已取消,已退款 -->
					<view class="btns" v-if="item.status == -1 || item.status == -3">
						<view @tap.stop="deleteOrder(item)">删除</view>
						<view @tap.stop="againReserve(item)">再次预订</view>
					</view>
					<!-- 待使用 -->
					<view class="btns" v-if="item.status == 1">
						<view @tap.stop="orderDetail(item)">申请退款</view>
						<view @tap.stop="againReserve(item)">再次预订</view>
					</view>
					<!-- 待支付 -->
					<view class="btns" v-if="item.status == 0">
						<view @tap.stop="cancelOrder(item)">取消订单</view>
						<view @tap.stop="toPay(item)" style="color: #007A69;">去支付</view>
					</view>
					<!-- 已完成 -->
					<view class="btns" v-if="item.status == 3">
						<view @tap.stop="deleteOrder(item)">删除订单</view>
						<!-- <view @tap.stop="goToAppraise(item)">评价</view> -->
						<view @tap.stop="againReserve(item)">再次预订</view>
					</view>
				</u-list-item>
			</u-list>
		</block>
		<block v-else>
			<NoData />
		</block>
		<uni-load-more :status="status" color="#007aff" />
	</view>
</template>

<script>
	import uniLoadMore from '@/compoments/load-more/index.vue'
	import nodata from '@/compoments/NoData/index1.vue'
	export default {
		components: {
			nodata
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				status: 'more', //加载状态
				fromData: {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					limit: 10,
					page: 1,
					sort: 1,
					condition: '',
					orderState: '',
				},
				orderId: '',
				orderList: [],
				osConfig: {
					'0': '待支付',
					'1': '待使用',
					'-1': '已取消',
					'-2': '退款中',
					'-3': '已退款',
					'3': '已完成'
				},
				oscConfig: {
					0: 's0',
					1: 's1',
				},
				isOver: false
			}
		},
		methods: {
			scrolltolower() {
				if (this.isOver) return;
				uni.showNavigationBarLoading()
				this.getList()
			},
			//评价
			goToAppraise(item) {
				const obj = {
					guideId: item.id,
					orderCode: item.orderCode,
					sourceType: 7
				}
				uni.navigateTo({
					url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(obj)
				})
			},
			orderDetail(item) {
				uni.navigateTo({
					url: '/pagesTrip/packageArea/order?orderCode=' + item.id
				})
			},
			changeStatus(index) {
				this.fromData.page = 1;
				this.orderList = [];
				if (index === 0) this.fromData.orderState = '';
				else if (index === 1) this.fromData.orderState = '0'
				else if (index === 2) this.fromData.orderState = '1';
				else if (index === 3) this.fromData.orderState = '3';
				else if (index === 4) this.fromData.orderState = '-2,-3';
				this.getList();
			},
			//删除
			deleteOrder(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要删除吗？确定删除将不可撤回！',
					success: function(res) {
						if (res.confirm) {
							that.$api.get('/api/shipScenic/delSsOrder/' + item.id).then(res => {
								if (res.data.code === 0) {
									that.$showToast('订单已删除');
									setTimeout(() => {
										that.fromData.page = 1;
										that.orderList = [];
										that.getList();
									}, 300)
								}
							})
						}
					}
				});
			},
			//再次预订
			againReserve(item) {
				uni.redirectTo({
					url: '/pagesTrip/packageArea/index?turnType=1'
				})
			},
			//取消订单
			cancelOrder(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: function(res) {
						if (res.confirm) {
							that.$api.get('/api/shipScenic/cancelOrder/' + item.orderCode).then(res => {
								if (res.data.code === 0) {
									that.$showToast('订单已取消');
									that.getList();
								} else that.$showToast(res.data.msg)
							})
						}
					}
				});
			},
			//去支付
			toPay(item) {
				this.orderId = item.orderCode
				this.lsKey = 'toPay';
				this.confrimPay();
			},
			confrimPay(item) {
				this.$api.get('/api/shipScenic/getSsPersonalOrderInfo/' + item.id).then(resu => {
					if (resu.data.code === 0) {
						if(resu.data.data.status==0){
							this.$api.post('/order/icbc/createOrder', {
								orderCode: this.orderId,
								tradeType: 'JSAPI',
								openId: JSON.parse(uni.getStorageSync('userInfo')).openId
							}, false).then(res => {
								if (res.statusCode == 200 && res.data != null) {
									this.payShow = false;
									if (res.data.appId) {
										this.$wxPay(res.data).then(result => {
											uni.navigateTo({
												url: '/pagesTrip/scenicSpots/paySuccess?type=shipAnd&orderId=' +
													this.orderId
											})
										})
									} else if (res.data.code && res.data.code != 0) {
										this.$showModal(res.data.msg);
									}
								} else this.$showModal(res.data.msg);
							})
						}else this.$showToast('不可支付，请稍后刷新列表');
					}else this.$showToast(resu.data.msg);
				})
			},
			search(keyword) {
				this.fromData.condition = keyword;
				this.getList();
			},
			getList() {
				let that = this;
				this.$api.get('/api/shipScenic/getSsPersonalOrderList', this.fromData)
					.then(res => {
						if (res.data.code == 0) {
							this.fromData.page++;
							let {
								list,
								total
							} = res.data.data;
							if (that.orderList.length + list.length > total || list.length == 0) return that.isOver =
								true;
							that.orderList = [...that.orderList, ...list];
							that.orderList.forEach(d => {
								if (d.status == 0) {
									let diffMS = Date.parse(new Date(d.expireTime)) - Date.parse(new Date());
									if (diffMS > 1000) d.djsTime = diffMS - 1000; //提前一秒，便于取消刷新
								}
							})
						}
					})
			},
			finish(item) {
				this.$api.get('/api/shipScenic/cancelOrder/' + item.orderCode).then(res => {
					if (res.data.code === 0) {
						setTimeout(() => {
							this.fromData.page = 1;
							this.isOver = false;
							this.orderList = [];
							this.getList();
						}, 500)
					} else this.$showModal(res.data.msg)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.orders {
		display: flex;
		flex-direction: column;
		align-items: center;

		&.empty {
			height: 100%;
			justify-content: center;
		}

		::v-deep .u-list-item {
			width: 100%;
			margin-top: 20rpx;
			border-radius: 16rpx;
			background: #fff;
			padding: 36rpx 24rpx 24rpx;
			box-sizing: border-box;

			&:last-child {
				margin-bottom: 40rpx;
			}

			.top {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						line-height: 28rpx;
						margin-left: 20rpx;
					}
				}

				.right {
					text-align: right;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 26rpx;

					text {
						color: #999;
					}
				}
			}

			.content {
				padding: 30rpx 0 24rpx 56rpx;
				border-bottom: 1rpx solid #EFEFEF;
				background: #fff;
				position: relative;

				.title {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					line-height: 32rpx;
				}

				.date {
					text {
						display: block;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #AAAAAA;
						line-height: 24rpx;
						margin-top: 30rpx;

						&:last-child {
							margin-top: 24rpx;
						}
					}
				}

				.room_price {
					position: absolute;
					bottom: 12px;
					right: 0;
					z-index: 1;

					text {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #808080;
						line-height: 30rpx;
					}

				}
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				&>view {
					margin: 24rpx 0 0 24rpx;
					width: 148rpx;
					height: 56rpx;
					border: 1rpx solid #EFEFEF;
					border-radius: 28rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}

	.qx {
		color: #AAAAAA !important;
	}

	.s1 {
		color: #333 !important;
	}

	.s0 {
		color: #FF7D01 !important;
	}
</style>